<template>
    <div>
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/welcome' }">    <i class="el-icon-location-information"></i>    首页</el-breadcrumb-item>
            <el-breadcrumb-item>商品管理</el-breadcrumb-item>
            <el-breadcrumb-item>商品分类</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card>
            <el-button type="primary" class="fl" @click="getparentcatelist">添加分类</el-button>
            <tree-table class="tree-table" v-bind:data="catelist" v-bind:columns="columns"
            :selection-type="false" :expand-type="false" show-index index-text="#"
            border>
                <template slot="isok" slot-scope="scope">
                    <i style="color:lightgreen" class="el-icon-success" v-if="scope.row.cat_deleted === true"></i>
                    <i style="color:red" class="el-icon-error" v-if="scope.row.cat_deleted === false"></i>
                </template>
                <template slot="order" slot-scope="scope">
                    <el-tag type v-if="scope.row.cat_level === 0">一级</el-tag>
                    <el-tag type="success" v-if="scope.row.cat_level === 1">二级</el-tag>
                    <el-tag type="warning" v-if="scope.row.cat_level === 2">三级</el-tag>
                </template>
                <template slot="opt" slot-scope="scope">
                    <el-button size="mini" type='primary' icon="el-icon-edit" v-on:click="toedit(scope.row)">编辑</el-button>
                    <el-button size="mini" type='primary' icon="el-icon-delete" v-on:click="todelete(scope.row.cat_id)">删除</el-button>
                </template>
            </tree-table>
            <el-pagination background layout="prev, pager, next" :total="total"
            @current-change="currentpage" :current-page="queryinfo.pagenum" :page-size="queryinfo.pagesize">
            </el-pagination>
        </el-card>
        <el-dialog v-on:open="addcatedialogopen" v-on:close="addcatedialogclosed" title="添加分类" :visible.sync="dialogVisible" width="40%">
        <el-form :model="addForm" :rules="rules" ref="addFormRef" label-width="100px" class="demo-ruleForm">
            <el-form-item label="分类名称" prop="cat_name">
                <el-input v-model="addForm.cat_name"></el-input>
            </el-form-item>
            <el-form-item label="父级分类"  v-if="!isedit" >
                <div class="block">
                    <el-cascader expand-trigger="hover" :options="parentcatelist"
                        v-model="selectedkey"
                        :props="props"
                        @change="parentcatechange"
                        clearable change-on-select>
                    </el-cascader>
                </div>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="addcatelist">确 定</el-button>
        </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data: function () {
        return {
            isedit: false,
            selectedkey: [],
            cat_id: 0,
            addForm: {
                cat_name: '',
                cat_pid: 0,
                cat_level: 0
            },
            catelist: [],
            parentcatelist: [],
            msg: '',
            queryinfo: {
                type: [3],
                pagenum: 1,
                pagesize: 5
            },
            dialogVisible: false,
            total: 0,
            // 定义表格中所有的列的规则
            columns: [
                {
                    label: '分类名称',
                    prop: 'cat_name'
                }, {
                    label: '是否有效',
                    type: 'template', // 定义为模板列
                    template: 'isok'
                }, {
                    label: '排序',
                    type: 'template', // 定义为模板列
                    template: 'order'
                }, {
                    label: '操作',
                    type: 'template', // 定义为模板列
                    template: 'opt'
                }
            ],
            rules: {
                cat_name: [
                    { required: true, message: '请输入分类名称', trigger: 'blur' }
                ]
            },
            props: {
                value: 'cat_id',
                label: 'cat_name',
                children: 'children'
            }
        }
    },
    created: function () {
    this.getcatelist()
    },
    methods: {
        getcatelist: function () {
            this.$http.get('categories', { params: this.queryinfo }).then(result => {
            console.log(result)
            if (result.data.meta.status !== 200) {
                this.$message.error('获取商品分类不成功！')
                return false
            }
            this.total = result.data.data.total
            this.catelist = result.data.data.result
            console.log(this.catelist)
            console.log(this.total)
        }).catch(() => {
            this.$message.error('无法获取商品分类数据，请稍后重试！')
        })
        },
        currentpage: function (newpage) {
            this.queryinfo.pagenum = newpage
            this.getcatelist()
        },
        getparentcatelist: function () {
            this.dialogVisible = true
            this.$http.get('categories', { params: { type: 2 } }).then(result => {
                console.log(result)
                if (result.data.meta.status !== 200) {
                    this.$message.error('获取分类失败！')
                    return false
                }
                this.parentcatelist = result.data.data
                console.log(this.parentcatelist)
            })
        },
        parentcatechange: function () {
            console.log(this.selectedkey)
            if (this.selectedkey.length > 0) {
                this.addForm.cat_level = this.selectedkey.length
                this.addForm.cat_pid = this.selectedkey[this.selectedkey.length - 1]
            } else {
                this.addForm.cat_pid = 0
                this.addForm.cat_level = 0
            }
        },
        addcatelist: function () {
            if (this.isedit) {
                this.$http.put(`categories/${this.cat_id}`, { cat_name: this.addForm.cat_name }).then(result => {
                console.log(result)
            })
            }
            console.log(this.addForm)
            this.$refs.addFormRef.validate(result => {
                if (!result) {
                    this.$message.error('分类名称验证失败！')
                    this.dialogVisible = false
                    return false
                }
                this.$http.post('categories', this.addForm).then(result => {
                    console.log(result)
                    if (result.data.meta.status !== 201) {
                        this.$message.error('添加失败，请稍后重试！')
                        this.dialogVisible = false
                        return false
                    }
                    this.$message.success('创建分类成功!')
                    this.getcatelist()
                    this.dialogVisible = false
                })
            })
        },
        addcatedialogclosed: function () {
            window.setTimeout(() => {
                this.isedit = false
                this.$refs.addFormRef.resetFields()
                this.selectedkey = []
                this.addForm.cat_pid = 0
                this.addForm.cat_level = 0
            }, 500)
        },
        addcatedialogopen: function () {
            if (!this.isedit) {
                this.addForm.cat_name = ''
            }
        },
        toedit: function (r) {
            this.dialogVisible = !this.dialogVisible
            this.isedit = !this.isedit
            console.log(r.cat_name)
            this.addForm.cat_name = r.cat_name
            this.cat_id = r.cat_id
        },
        todelete: function (r) {
            console.log(r)
            this.$confirm('此操作将永久删除该分类, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
            }).then(() => {
            this.$http.delete(`categories/${r}`).then(result => {
                console.log(result)
                if (result.data.meta.status !== 200) {
                    this.$message.error('删除失败，请稍后重试！')
                    return false
                }
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                })
                this.getcatelist()
            })
            }).catch(() => {
            this.$message({
            type: 'info',
            message: '已取消删除'
            })
            })
        }
    }
}
</script>

<style lang="less" scoped>
*{
    padding: 0;
    margin: 0;
}
 .el-breadcrumb{
     height: 43px;
     line-height: 43px;
     background-color: rgb(233, 238, 243);
     position:absolute;
     top: -43px;
     margin-left: 0;
     left: 0;
     padding-left: 25px;
     padding-right: 25px;
    //  transform: translateY(-30px);
    //  z-index: 999;
    .el-breadcrumb__separator {
    margin: 0 9px;
    font-weight: 700;
    color: #536da1!important;
    }
 }
 .el-main{
     overflow: scroll;
 }
 .tree-table{
     margin-top: 60px;
     margin-bottom: 40px;
 }
 .block{
     width: 100%;
     .el-cascader{
         width: 100%;
     }
 }
</style>
